import { Form, Input, Checkbox, Button, Layout, Menu, Radio } from 'antd';
import request from '../http';
import React from 'react';
import axios from 'axios';
import { history } from 'umi';
import './index.less';
import imgUrl from '../images/bj.png';
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined,
  VideoCameraOutlined,
  UploadOutlined,
  LockOutlined,
} from '@ant-design/icons';

import { Link } from 'umi';

const { Header, Sider, Content } = Layout;

class Login extends React.Component {
  // const onFinish = (values: any) => {
  //   console.log('Received values of form: ', values);
  // };
  state = { account: '', password: '', userType: '' };

  Search = () => {
    //获取用户的输入
    const { account, password, userType } = this.state;
    // console.log(account,password,userType)
    //发送网络请求
    //自己的: `http://localhost:8000/api1/search/users?q=${account}`
    // http://39.101.170.85:8082/auth/login

    axios
      .put('/auth/login', {
        account,
        password,
        userType,
      })
      .then((res) => {
        console.log('登录请求成功！', res);
        if (res.data.success === true) {
          if (userType === 'admin') {
            sessionStorage.setItem('apiKey', res.data.data.token);
            history.push('/admin/studentInfo/index');
          }
          if (userType === 'student') {
            sessionStorage.setItem('apiKey', res.data.data.token);
            history.push('/student/info/index');
          }
          if (userType === 'teacher') {
            sessionStorage.setItem('apiKey', res.data.data.token);
            history.push('/teacher/course/index');
          }
        } else {
          alert('账号或密码错误,用户类型不符合');
        }
      })
      .catch((err) => {
        alert('服务器超时！');
        console.log('登陆超时', err);
      });
  };

  handleUsername = (e) => {
    //输入的数
    const newUsername = e.target.value;
    //改变状态
    this.setState({ account: newUsername });
  };

  handlePassword = (e) => {
    //输入的数
    const newPassword = e.target.value;
    //改变状态
    this.setState({ password: newPassword });
  };

  getValue = (event) => {
    //获取单选框选中的值
    this.setState({
      userType: event.target.value,
    });
  };

  render() {
    return (
      <div className="contain">
        <img className="bg-img" src={imgUrl} alt="" />
        {/* <input type="text" ref={ this.myRef2 } ></input> */}
        <div className="box">
          <Form
            name="normal_login"
            className="login-form"
            initialValues={{ remember: true }}
          >
            <Form.Item
              name="username"
              rules={[{ required: true, message: '请输入用户名!' }]}
            >
              <Input
                onChange={this.handleUsername}
                prefix={<UserOutlined className="site-form-item-icon" />}
                placeholder="Username"
              />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[{ required: true, message: '请输入密码!' }]}
            >
              <Input
                onChange={this.handlePassword}
                prefix={<LockOutlined className="site-form-item-icon" />}
                type="password"
                placeholder="Password"
              />
            </Form.Item>
            <Radio.Group name="radiogroup" defaultValue={1}>
              <Radio
                name="student"
                value={'student'}
                checked={this.state.userType == 'student'}
                onChange={(e) => this.getValue(e)}
              >
                学生
              </Radio>
              <Radio
                name="teacher"
                value={'teacher'}
                checked={this.state.userType == 'teacher'}
                onChange={(e) => this.getValue(e)}
              >
                老师
              </Radio>
              <Radio
                name="admin"
                value={'admin'}
                checked={this.state.userType == 'admin'}
                onChange={(e) => this.getValue(e)}
              >
                管理员
              </Radio>
            </Radio.Group>
            <Form.Item>
              <Form.Item name="remember" valuePropName="checked" noStyle>
                <Checkbox>记住密码</Checkbox>
              </Form.Item>

              <a className="login-form-forgot" href="#">
                忘记密码？
              </a>
            </Form.Item>

            <Form.Item>
              <Button
                type="primary"
                htmlType="submit"
                className="login-form-button"
                onClick={this.Search}
              >
                登录
              </Button>
              <a href="#" className="register">
                点击注册？
              </a>
            </Form.Item>
          </Form>
        </div>
      </div>
    );
  }
}

export default Login;
